<template>
  <div class="userInfo">
    <el-card class="box-card">
      <div slot="header" class="clearfix ">
        <span class="text">基本信息</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="登录名称"  >
          <el-input v-model="username" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
          <el-form-item class="buttons">
            <el-button class="sendButton" @click="submitForm()">提交修改</el-button>
            <el-button class="resetButton" @click="resetForm()">重置</el-button>
          </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      form: {
        id: '',
        nickname: '',
        email: ''
      },
      rules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '邮箱格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取用户信息
    async getUserInfoAction () {
      try {
        const data = this.$store.state.user.userInfo
        console.log('11')
        console.log('初始', data)
        // 等有数据时候使用
        this.form.id = data.id
        this.username = data.username
      } catch (e) {
        console.log(e)
      }
    },
    // 提交修改基本信息
    async changeInfoAction () {
      try {
        await this.$store.dispatch('user/changeUserInfoAction', this.form)
        this.form.nickname = ''
        this.form.email = ''
        // this.getUserInfoAction()
        location.reload()
      } catch (e) {
        console.log(e)
      }
    },
    submitForm () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          alert('submit!')
          await this.changeInfoAction()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm () {
      this.form.nickname = ''
      this.form.email = ''
    }
  },
  created () {
    this.getUserInfoAction()
  }
}
</script>

<style lang='scss' scoped>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1126px;
    ::v-deep .el-card__header{
      height: 68px;
      .text {
        font-size: 16px;
        margin: 5px 0;
        font-weight: 600;
      }
    }
    ::v-deep .el-form {
      .el-input__inner{
        width: 400px;
      }
      .buttons{
        padding-left: 66px;
        // 按钮效果
        .sendButton,.resetButton{
            padding: 5px 16px;
            height: 32px;
        }
        .sendButton{
            width: 88px;
            background-color: #4F81FF ;
            color: #FFF;
            &:hover{
                background-color:#608DFF ;
            }
        }
        .resetButton{
            width: 60px;
            background-color: #8f9397;
            color: #fff;
            &:hover{
                background-color:#a1a6ac;
            }
        }
      }

    }

  }
</style>
